<template>
  <view class="patient-form">
    <!-- 基本信息表单 -->
    <view class="form-card">
      <view class="section-title">基本信息</view>
      <view class="form-item">
        <text class="label required">姓名</text>
        <input 
          type="text"
          v-model="form.name"
          placeholder="请输入就诊人姓名"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">证件类型</text>
        <view class="value-text">{{ getIdTypeLabel(form.idType) }}</view>
      </view>
      
      <view class="form-item">
        <text class="label">证件号码</text>
        <view class="value-text">{{ maskIdNumber(form.idNumber) }}</view>
      </view>
      
      <view class="form-item">
        <text class="label required">与本人关系</text>
        <picker 
          mode="selector"
          :range="relations"
          range-key="label"
          @change="onRelationChange"
        >
          <view class="picker">
            <text>{{ selectedRelation?.label || '请选择关系' }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 就诊卡信息 -->
    <view class="form-card">
      <view class="section-title">就诊卡信息</view>
      <view class="form-item">
        <text class="label">就诊卡号</text>
        <view class="value-text">{{ form.cardNo || '暂未绑定就诊卡' }}</view>
      </view>
      <view class="form-item">
        <text class="label required">手机号码</text>
        <input 
          type="number"
          v-model="form.phone"
          placeholder="请输入手机号码"
          maxlength="11"
        />
      </view>
    </view>
    
    <!-- 其他设置 -->
    <view class="form-card">
      <view class="switch-item">
        <text>设为默认就诊人</text>
        <switch 
          :checked="form.isDefault"
          @change="e => form.isDefault = e.detail.value"
          color="#67AFAB"
          :disabled="form.isDefault"
        />
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button 
        class="submit-btn primary-btn"
        :disabled="!canSubmit"
        @tap="submitForm"
      >保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 关系选项
const relations = [
  { value: 'self', label: '本人' },
  { value: 'parent', label: '父母' },
  { value: 'child', label: '子女' },
  { value: 'spouse', label: '配偶' },
  { value: 'other', label: '其他' }
]
const selectedRelation = ref(null)

// 表单数据
const form = ref({
  id: '',
  name: '',
  idType: '',
  idNumber: '',
  relation: '',
  cardNo: '',
  phone: '',
  isDefault: false
})

// 获取证件类型标签
const getIdTypeLabel = (type) => {
  const types = {
    id: '身份证',
    passport: '护照',
    hkm: '港澳居民来往内地通行证'
  }
  return types[type] || type
}

// 隐藏证件号码中间部分
const maskIdNumber = (number) => {
  if (!number) return ''
  if (number.length <= 8) return number
  return number.replace(/(?<=.{4}).(?=.{4})/g, '*')
}

// 关系变更
const onRelationChange = (e) => {
  selectedRelation.value = relations[e.detail.value]
  form.value.relation = selectedRelation.value.value
}

// 是否可以提交
const canSubmit = computed(() => {
  const { name, relation, phone } = form.value
  return name && relation && phone
})

// 提交表单
const submitForm = () => {
  if (!canSubmit.value) return
  
  uni.showLoading({
    title: '保存中...'
  })
  
  // 这里调用保存API
  console.log('提交表单:', form.value)
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 1000)
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const id = page.$page?.options?.id
  
  // 加载就诊人数据
  loadPatient(id)
})

// 加载就诊人数据
const loadPatient = (id) => {
  // 这里调用API获取数据
  // 模拟数据
  form.value = {
    id,
    name: '张三',
    idType: 'id',
    idNumber: '440123199001011234',
    relation: 'self',
    cardNo: '1234567890',
    phone: '13800138000',
    isDefault: true
  }
  
  // 设置选中的关系
  selectedRelation.value = relations.find(r => r.value === form.value.relation)
}
</script>

<style lang="scss">
.patient-form {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx 20rpx 120rpx;
  
  .form-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .form-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 28rpx;
        color: $text-primary;
        margin-bottom: 16rpx;
        display: block;
        
        &.required::before {
          content: '*';
          color: $danger;
          margin-right: 4rpx;
        }
      }
      
      .value-text {
        font-size: 28rpx;
        color: $text-primary;
        padding: 24rpx 30rpx;
        background: $bg-color;
        border-radius: $radius-lg;
      }
      
      input {
        width: 100%;
        height: 88rpx;
        background: $bg-color;
        border-radius: $radius-lg;
        padding: 0 30rpx;
        font-size: 28rpx;
        color: $text-primary;
      }
      
      .picker {
        height: 88rpx;
        background: $bg-color;
        border-radius: $radius-lg;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        text {
          font-size: 28rpx;
          color: $text-primary;
          
          &.icon-arrow-right {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
    }
    
    .switch-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 28rpx;
        color: $text-primary;
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    
    .submit-btn {
      width: 100%;
      
      &[disabled] {
        opacity: 0.6;
      }
    }
  }
}
</style> 